<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" th:href="@{/site.css}"/>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row type="flex" justify="center">
                <el-col :span="12" :offset="6">
                    <h3>基于Spring IO Platform的多模块Gradle项目示例</h3>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-row>
                <el-col :span="12" :offset="6">
                    <el-table stripe border :data="bookData">
                        <el-table-column label="图书信息">
                            <el-table-column prop="book" label="书目"></el-table-column>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" :offset="6">
                    <el-table stripe border :data="springData">
                        <el-table-column label="Spring版本">
                            <el-table-column prop="name" label="属性"></el-table-column>
                            <el-table-column prop="value" label="值"></el-table-column>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        computed: {
            bookData: function () {
                let data = []
                axios.get('/booklist')
                    .then(response => {
                        for (let book of response.data) {
                            data.push({'book': book})
                        }
                    })
                    .catch(error => {
                        this.$notify({title: '网络错误', message: error})
                    })
                return data
            },
            springData: function () {
                let data = []
                axios.get('/springversion')
                    .then(response => {
                        data.push({'name': 'Spring版本', 'value': response.data.springVersion})
                        data.push({'name': 'Spring Boot版本', 'value': response.data.springBootVersion})
                    })
                    .catch(error => {
                        this.$notify({title: '网络错误', message: error})
                    })
                return data
            }
        }
    })
</script>
</body>
</html>
